<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物商店</title>
    <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <script type="text/javascript" src="../res/layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body id="list-con">


<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home" id="adm" style="display: none">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/admin">后台管理</a>
        </p>
        <div class="sn-quick-menu">
            <div id="d1" style="display: none" class="login"><a href="/register" style="color: #0C0C0C">[注册]</a></div>
            <div id="d4" style="display: none" class="login"><a href="/login" style="color: #0C0C0C;margin-left: -10px">
                [登录]</a></div>
            <div id="d2" style="display: none" class="login"><a style="color: #1E9FFF" id="user"></a></div>
            <div id="d3" style="display: none"
                 class="login"><a id="f1" style="color: #0C0C0C" href="javascript:;">退出登录</a></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="/index" title="宠物商城" id="a1">
                    <img style="width: 50%;height: 50%" src="../res/static/img/123.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form class="layui-form">
                    <input type="text" id="text" name="text" autocomplete="off"
                           class="layui-input" placeholder="请输入宠物名称">
                    <button class="layui-btn" id="seacher">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base commodity-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="/index" class="active">首页</a>
                    <a href="/shopcart">购物车</a>
                    <a href="/about">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="commod-cont-wrap">
        <div class="commod-cont w1200 layui-clear">
            <div class="left-nav">
                <div class="title">宠物分类</div>
                <div class="list-box">
                    <dl>
                        <dt>家庭犬</dt>
                        <dd><a href="javascript:;">柴犬</a></dd>
                        <dd><a href="javascript:;">贵宾犬</a></dd>
                        <dd><a href="javascript:;">狮犬</a></dd>
                    </dl>
                    <dl>
                        <dt>牧羊犬</dt>
                        <dd><a href="javascript:;">边境牧羊犬</a></dd>
                        <dd><a href="javascript:;">比利时牧羊犬</a></dd>
                        <dd><a href="javascript:;">瑞典柯基犬</a></dd>
                        <dd><a href="javascript:;">挪威布哈德犬</a></dd>
                        <dd><a href="javascript:;">德国牧羊犬</a></dd>
                    </dl>
                    <dl>
                        <dt>工作犬</dt>
                        <dd><a href="javascript:;">哈士奇</a></dd>
                        <dd><a href="javascript:;">藏獒</a></dd>
                        <dd><a href="javascript:;">萨摩耶犬</a></dd>
                        <dd><a href="javascript:;">阿拉斯加雪橇犬</a></dd>
                    </dl>
                    <dl>
                        <dt>玩具犬</dt>
                        <dd><a href="javascript:;">吉娃娃</a></dd>
                        <dd><a href="javascript:;">蝴蝶犬</a></dd>
                        <dd><a href="javascript:;">巴哥犬</a></dd>
                    </dl>
                    <dl>
                        <dt>枪猎犬</dt>
                        <dd><a href="javascript:;">波音达</a></dd>
                        <dd><a href="javascript:;">拉布拉多寻回犬</a></dd>
                        <dd><a href="javascript:;">金毛寻回犬</a></dd>
                        <dd><a href="javascript:;">田野小猎犬</a></dd>
                    </dl>
                </div>
            </div>
            <div class="right-cont-wrap">
                <div class="right-cont">
                    <div class="prod-number">
                        <br>
                    </div>
                    <div class="cont-list layui-clear" id="list-cont">
                        <!--通过后台自动生成-->
                    </div>
                    <!--分页-->
                    <div id="pages"></div>
                    <div id="page"></div>
                    <div id="demo0" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="footer">
    <div class="ng-promise-box">
        <div class="ng-promise w1200">
            <p class="text">
                <a class="icon1" href="javascript:;">7天无理由退换货</a>
                <a class="icon2" href="javascript:;">满99元全场免邮</a>
                <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
            </p>
        </div>
    </div>
    <div class="mod_help w1200">
        <p>
            <a href="javascript:;">关于我们</a>
            <span>|</span>
            <a href="javascript:;">帮助中心</a>
            <span>|</span>
            <a href="javascript:;">售后服务</a>
            <span>|</span>
            <a href="javascript:;">母婴资讯</a>
            <span>|</span>
            <a href="javascript:;">关于货源</a>
        </p>
        <p class="coty">宠物商城版权所有 &copy; 2012-2020</p>
    </div>
</div>
<script type="text/javascript">

    layui.use(['layer', 'jquery', 'laypage'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage;


        var option = {
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always'
            , height: '298'
            , indicator: 'none'
        }


        initIndex();

        initShow();

        //搜索
        $("#seacher").click(function () {
            var text = $("#text").val().trim();
            if (text === null || text === "") {
                layer.msg("请输入宠物名称!", {icon: 0, shade: 0.2, time: 500});
                return false;
            }
            $.get("/seacherInfoCount?=" + text, {}, function (data) {
                abc(data, text);
            }, "json")
        })


        function abc(data, text) {
            laypage.render({
                elem: 'pages'
                , count: data
                , limit: 12
                , limits: [12, 24, 36, 48, 60]
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    $.get("/seacherInfo?text=" + text + "&page=" + obj.curr + "&limit=" + obj.limit, function
                        (result) {
                        $("#list-cont").children().remove();
                        for (var i = 0; i < result.data.length; i++) {
                            $("#list-cont").append("<div class=\"item\" style='height: 360px'>\n" +
                                "<div class=\"img\" style=\"width: 280px;height: 360px\">\n" +
                                "<a href=\"/details?id=" + result.data[i].goodsId +
                                "\"><img style=\"max-width: 280px;max-height: 280px;width: 280px;height: 280px\" src=" +
                                result.data[i].goodsImage + "/></a>\n" +
                                "                            <div class=\"text\">\n" +
                                "                                <p class=\"title\">" + result.data[i].goodsName + "</p>\n" +
                                "                                <p class=\"price\">\n" +
                                "                                    <span class=\"pri\">￥" + result.data[i].goodsPrice + "</span>\n" +
                                "                                    <span class=\"nub\">" + result.data[i].type3Id + "</span>\n" +
                                "                                </p>\n" +
                                "                            </div>\n" +
                                "                     </div>   </div>");
                        }
                    }, "json");
                }
            })
        }

        function aa(d) {
            laypage.render({
                elem: 'pages'
                , count: d
                , limit: 12
                , limits: [12, 24, 36, 48, 60]
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    $.get("/getGoodsShowToIndex?page=" + obj.curr + "&limit=" + obj.limit, {}, function (result) {
                        $("#list-cont").children().remove();
                        for (var i = 0; i < result.data.length; i++) {
                            $("#list-cont").append("<div class=\"item\" style='height: 360px'>\n" +
                                "<div class=\"img\" style=\"width: 280px;height: 360px\">\n" +
                                "<a href=\"/details?id=" + result.data[i].goodsId +
                                "\"><img style=\"max-width: 280px;max-height: 280px;width: 280px;height: 280px\" src=" +
                                result.data[i].goodsImage + "/></a>\n" +
                                "                            <div class=\"text\">\n" +
                                "                                <p class=\"title\">" + result.data[i].goodsName + "</p>\n" +
                                "                                <p class=\"price\">\n" +
                                "                                    <span class=\"pri\">￥" + result.data[i].goodsPrice + "</span>\n" +
                                "                                    <span class=\"nub\">" + result.data[i].type3Id + "</span>\n" +
                                "                                </p>\n" +
                                "                            </div>\n" +
                                "                     </div>   </div>");
                        }
                    }, "json");
                }
            });
        }


        //初始化
        function initShow() {
            $.get("/getPageCountToiIndex", {}, function (data) {
                aa(data);
            }, "json");
        }


        function initIndex() {
            $.get("/findLoginInfo", {}, function (r) {
                if (r !== "null") {
                    $('#d1').css('display', 'none');
                    $('#d2').css('display', 'block');
                    $('#d3').css('display', 'block');
                    $('#d4').css('display', 'none');
                    $('#adm').css('display', 'block');
                    $('#a1').css('margin-left', '-86px');
                    $("#user").text("你好," + r + "!");
                    $("#c").css('display', 'inline');
                    $("#admin").css('display', 'inline');
                } else {
                    $('#d1').css('display', 'block');
                    $('#d4').css('display', 'block');
                    $('#d2').css('display', 'none');
                    $('#d3').css('display', 'none');
                    $('#adm').css('display', 'none');
                    $("#c").css('display', 'inline');
                    $('#a1').css('margin-left', '0px');
                    $("#admin").css('display', 'inline');
                }
            }, "text");
        }

        $("#f1").click(function () {
            layer.confirm('确定退出登录吗？', {icon: 3}, function (index) {
                $.get("/loginOut", {}, function (r) {
                    layer.close(index);
                    index = layer.load(1, {shade: [0.1, '#fff']});
                    parent.layer.msg('安全退出中...', {icon: 16, shade: 0.3, time: 5000});
                    $.get("/loginOut", {}, function (r) {
                        layer.closeAll('loading');
                        parent.layer.msg('退出成功！', {
                            icon: 1, time: 1000, shade: 0.2, end: function () {
                                window.location.reload();
                            }
                        });
                        layer.close(index);
                    });
                });
            });
        });
        carousel.render(option);
    })

</script>
</body>
</html>